<template>
  <el-menu
    id="BSTop"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#494b4d"
    text-color="#fff"
    active-text-color="#ffd04b"
    router=""
  >
    <div id="title"><a href="/backstage">后台管理中心</a></div>

    <el-dropdown trigger="click">
      <span id="right" class="el-dropdown-link" style="color: #e9eef3">
        用户
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item>修改密码</el-dropdown-item>
          <el-dropdown-item @click.native="logout">注销</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <span>你忍心退出吗 退出可就要重新登路了哦</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmLogout">确 定</el-button>
      </span>
    </el-dialog>

    <el-menu-item index="1" id="right" route="/backstage/editor"
      >发布文章</el-menu-item
    >
    <el-menu-item index="2" id="right">处理中心</el-menu-item>

    <el-menu-item index="3" id="right">消息中心</el-menu-item>
  </el-menu>
</template>

<script>
import {clearToken ,clearUserName} from "../../../utils/auth";
export default {
  data(){
    return {
      centerDialogVisible: false,
    }
  },
  methods: {
    logout() {
      this.centerDialogVisible=true;
    },
    // 注销弹框确认按钮
    handleConfirmLogout() {
      clearToken();
      clearUserName();
      sessionStorage.setItem("token","false");
      this.$router.push("/admin");
      this.centerDialogVisible = false;
    },
  },
};
</script>

<style>
#right {
  float: right;
}
a {
  color: #ffffff;
  text-decoration: none;
}
#title {
  margin-left: 30px;
  font-size: 25px;
  color: #ffffff;
  float: left;
}
#BSTop {
  height: 100%;
}
</style>